<template>
	<view class="box">
		<u-navbar :is-back="false" title="我的">
		</u-navbar>
		<view class="bjbox">
			<view class="ifobox">
				<view class="txbox">
					<image src="../../static/qiandao.png" mode=""></image>
				</view>
				<view class="leftbox">
					<view class="name">
						吃货十三 <text class="hhr">合伙人</text>
					</view>
					<view class="phone" @click="phone">
						159****8888
					</view>
				</view>
			</view>

			<view class="hexbox">
				<view class="numbox" @click="quan">
					<view class="num">
						80
					</view>
					<view class="name">
						礼品券
					</view>
				</view>
				<view class="numbox" @click="card">
					<view class="num">
						38
					</view>
					<view class="name">
						生肖卡
					</view>
				</view>
				<view class="numbox" @click="mygold">
					<view class="num">
						8080
					</view>
					<view class="name">
						金币
					</view>
				</view>
				<view class="numbox" @click="balance">
					<view class="num">
						99.99
					</view>
					<view class="name">
						余额
					</view>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<view class="order">
				<text class="myorder">我的订单</text>
				<text class="findall" @click="lookboth">查看全部<text class="angle"></text></text>
			</view>
			<view class="hr"></view>

			<view class="navbox">
				<view class="smallnavbox" v-for="(item,index) in navarr" :key="index" @click="orderlist()">
					<image :src="item.img" mode="" class="navimg"></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="num" v-if="item.num">
						{{item.num}}
					</view>
				</view>
			</view>
		</view>

		<view class="myserve">
			<view class="title">
				我的服务
			</view>
			<view class="hr"></view>
			<view class="navbox">
				<view class="smallnavbox" v-for="(item,index) in fwarr" :key="index" @click="navbtn(item,index)">
					<image :src="item.image" mode="" class="navimg"></image>
					<view class="name">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navarr: [{
					title: "待付款",
					num: "0",
					img:'../../static/形状17拷贝.png'
				}, {
					title: "待使用",
					num: "2",
					img:'../../static/椭圆561.png'
				}, {
					title: "未拼中",
					num: "0",
					img:'../../static/失败_93.png'
				}, {
					title: "待收货",
					num: "0",
					img:"../../static/圆角矩形554.png"
				}, {
					title: "待评价",
					num: "0",
					img:'../../static/形状23.png'
				}],
				// 我的服务
				fwarr: [{
					title: "我的收藏",
					image: '../../static/未收藏icon拷贝.png',
					num: "0",
					url: "/pagesA/my_college/index"
				}, {
					title: "我的团队",
					image: '../../static/圆角矩形561.png',
					num: "2",
					url: "/pages/my_team/index"
				}, {
					title: "我的评价",
					image: '../../static/形状25拷贝2.png',
					num: "0",
					url: "/pagesA/remark_center/index"
				}, {
					title: "抽奖",
					image: '../../static/椭圆564拷贝.png',
					// num: "0",
					url: '/pagesB/draw/index'
				}, {
					title: "收货地址",
					image: '../../static/圆角矩形564.png',
					num: "0",
					url: "/pagesA/Site_manage/index"
				}, {
					title: "客服",
					image: '../../static/圆角矩形569.png',
					num: "0"
				}, {
					title: "关于我们",
					image: '../../static/形状27拷贝.png',
					num: "0",
					url: "/pagesB/about_us/index"
				}, {
					title: "推广海报",
					image: '../../static/椭圆563.png',
					num: "0"
				}, {
					title: "设置",
					image: '../../static/椭圆562.png',
					num: "0",
					url: "/pagesA/set/index"
				}, {
					title: "我是代理",
					image: '../../static/圆角矩形568拷贝2.png',
					url: "/pagesA/agency/index"
				}, {
					title: "我是商家",
					image: '../../static/矩形20.png',
					url: "/pagesB/businessman/index"
				}, {
					title: "退款售后",
					image: '../../static/圆角矩形552拷贝.png',
					url: "/pagesA/after_sale/index"
				}]
			}
		},
		methods: {
			navbtn(v, i) {
				this.jumpLink({
					link: v.url
				})
			},
			// 我的金币
			mygold() {
				this.jumpLink({
					link: "/pagesA/my_gold/index"
				})
			},
			// 我的余额
			balance() {
				this.jumpLink({
					link: "/pagesA/balance/index"
				})
			},
			// 我的订单列表
			orderlist() {
				this.jumpLink({
					link: "/pagesA/order_list/index"
				})
			},
			// 手机绑定
			phone() {
				this.jumpLink({
					link: "/pages/phone/index"
				})
			},
			//礼品券
			quan() {
				this.jumpLink({
					link: "/pagesB/present/index"
				})
			},
			// 十二生肖卡片
			card() {
				this.jumpLink({
					link: "/pagesB/myprize/index"
				})
			},
			// 查看全部订单
			lookboth() {
				this.jumpLink({
					link: "/pagesA/order_list/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: scroll;
	}

	.bjbox {
		width: 100%;
		height: 480rpx;
		background-image: url(../../static/mybj.png);
		background-size: 100% 480rpx;

		.ifobox {
			display: flex;
			align-items: center;
			margin-left: 31rpx;
			padding-top: 30rpx;
			box-sizing: border-box;

			.txbox {
				width: 128rpx;
				height: 128rpx;
				border-radius: 128rpx;
				border: solid 3rpx #FA8479;

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 128rpx;
				}
			}

			.leftbox {
				margin-left: 25rpx;

				.name {
					font-family: MicrosoftYaHei;
					font-size: 36rpx;
					color: #ffffff;
					opacity: 0.9;
					font-weight: 700;

					.hhr {
						width: 94rpx;
						height: 30rpx;
						background-color: #ffffff;
						border-radius: 15rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						color: #f73f33;
						font-family: MicrosoftYaHei;
						font-size: 22rpx;
						font-weight: 400;
						margin-left: 30rpx;
					}
				}

				.phone {
					font-family: MicrosoftYaHei;
					font-size: 26rpx;
					color: #ffffff;
					opacity: 0.9;
					font-weight: 700;
					margin-top: 20rpx;
				}
			}
		}

		.hexbox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 39rpx;

			.numbox {
				.num {
					font-family: MicrosoftYaHei;
					font-size: 36rpx;
					font-weight: 700;
					color: #ffffff;
					text-align: center;
				}

				.name {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					line-height: 40rpx;
					text-align: center;
					color: #ffffff;
					opacity: 0.8;
					margin-top: 25rpx;
				}
			}
		}
	}

	.btnbox {
		width: 690rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: -152rpx;

		.order {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			height: 84rpx;
			line-height: 84rpx;

			.myorder {
				font-family: MicrosoftYaHei;
				font-size: 28rpx;
				color: #505050;
			}

			.findall {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #999999;
			}

			.angle {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #999;
				border-left: 1px solid #999;
				transform: rotate(135deg);
				display: inline-block;
			}
		}

		.hr {
			width: 642rpx;
			height: 1rpx;
			background-color: #f0f0f0;
		}

		.navbox {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-left: 20rpx;
			margin-right: 20rpx;

			.smallnavbox {
				position: relative;
				width: 88rpx;

				.navimg {
					width: 41rpx;
					height: 41rpx;
					display: block;
					margin: 0 auto;
					margin-top: 43rpx;
				}

				.name {
					font-family: MicrosoftYaHei;
					font-size: 20rpx;
					color: #646464;
					text-align: center;
					margin-top: 20rpx;
					margin-bottom: 68rpx;
				}

				.num {
					width: 24rpx;
					height: 24rpx;
					background-color: #ff3838;
					border-radius: 24rpx;
					color: #ffffff;
					font-family: PingFang-SC-Regular;
					font-size: 16rpx;
					text-align: center;
					line-height: 24rpx;
					position: absolute;
					top: 32rpx;
					right: 15rpx;
				}
			}
		}
	}

	.myserve {
		width: 690rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding-bottom: 164rpx;
		box-sizing: border-box;

		.title {
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #505050;
			padding-left: 30rpx;
			box-sizing: border-box;
			height: 85rpx;
			line-height: 85rpx;
		}

		.hr {
			width: 642rpx;
			height: 1rpx;
			background-color: #f0f0f0;
		}


		.navbox {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-left: 20rpx;
			margin-right: 20rpx;

			.smallnavbox {
				position: relative;
				width: 132rpx;

				.navimg {
					width: 35rpx;
					height: 35rpx;
					display: block;
					margin: 0 auto;
					margin-top: 43rpx;
				}

				.name {
					font-family: MicrosoftYaHei;
					font-size: 26rpx;
					color: #646464;
					text-align: center;
					margin-top: 20rpx;
					// margin-bottom: 68rpx;
				}

				.num {
					width: 24rpx;
					height: 24rpx;
					background-color: #ff3838;
					border-radius: 24rpx;
					color: #ffffff;
					font-family: PingFang-SC-Regular;
					font-size: 16rpx;
					text-align: center;
					line-height: 24rpx;
					position: absolute;
					top: 32rpx;
					right: 15rpx;
				}
			}
		}
	}
</style>
